<template>
  <div class="v-workspace-attribute">
    <a-tabs
      v-model="activeKey"
      type="card"
      style="display: flex;flex-direction: column;"
      class="_tab-container"
    >
      <a-tab-pane v-for="item in filterDataList" :key="item.id" :tab="item.name">
        <component 
          :is="item.component" 
          v-if="activeKey === item.id"
          class="g-flex-1"
          :propertyGroupConfig="item.config"
          :smallType="true"
          :property="item.property"
        ></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import AttrList from './comps/AttrList';
import AttrTable from './comps/AttrTable';
import AttrSlots from './comps/AttrSlots';

const dataList = [
  { component: 'attr-list', id: 0, name: '属性' },
  { component: 'attr-slots', id: 1, name: '插槽', hidden: true }
];

export default {
  name: 'property-table',
  components: {
    "attr-list": AttrList,
    "attr-Table": AttrTable,
    "attr-slots": AttrSlots,
  },
  props: {
    element: {}
  },
  data() {
    return {
      dataList,
      activeKey: 0
    };
  },
  computed: {
    selectedElement(){
      return app.selectedElement;
    },
    filterDataList() {
      return this.dataList.filter(item => !item.hidden);
    }
  },
  watch: {
    selectedElement: function handle(val) {
      this.activeKey = 0;
      this.dataList = dataList;
      this.getPropertyGroupConfig();
      this.showSlots();
    }
  },
  created() {
    this.getPropertyGroupConfig();
    this.showSlots();
  },
  methods: {
    getPropertyGroupConfig() {
      if (!app.selectedElement) return;
      const type = app.selectedElement.getTypeName();
      const propertyGroupConfig = app.activeProject.configManager.getPropertyGroupConfig()[type] || [];
      const selectedElementProperties = app.selectedElement.properties.toArray();
      const propertyObj = {};
      selectedElementProperties.forEach((item, index) => {
        propertyObj[item.config.getMethod] = item;
      });
      const dataList = [...this.dataList];
      propertyGroupConfig.forEach((config, index) => {
        const navItem = {
          name: config.name, 
          value: type, 
          type: "propertyGroup",
          id: index + 1,
          component: 'attr-Table',
          property: propertyObj[config.propertyKey],
          config
        };
        dataList.push(navItem);
      });
      this.dataList = dataList;
      console.log('propertyGroupConfig', type, propertyGroupConfig);
    },

    //// 显示插槽
    showSlots() {
      if (this.selectedElement) {
        const type = this.selectedElement.getTypeName();
        const index = this.dataList.findIndex(item => item.id === 1);
        if (type === 'InstanceSpecification' || type === 'Instance') {
          this.$set(this.dataList[index], 'hidden', false);
        } else {
          this.$set(this.dataList[index], 'hidden', true);
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.v-workspace-attribute {
  height: 100%;
  /deep/ .ant-tabs-bar {
    flex: 0 0 ;
  }
  /deep/ .ant-tabs-nav {
    > div {
      display: flex;
      align-items: center;
    }
  }
  /deep/ .ant-tabs-content {
    flex: 1;
    .ant-tabs-tabpane-active {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}

</style>
